<template>
  <div class="tax-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>广告收益</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/advertising_revenue' }">广告收益统计</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/tax_process' }">缴税流程</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="data-page">
      <div class="data-steps">
        <el-steps :active="activeStep" align-center>
          <el-step title="选择缴税金额"/>
          <el-step title="填写结算单" />
          <el-step title="提交成功" />
        </el-steps>
      </div>
      <div class="data-table">
        <div class="head">
          <div class="title">是否开票：</div>
          <div>
            <el-radio-group v-model="radio">
              <el-radio :value="1">能开专票（广告发布费）</el-radio>
              <el-radio :value="2">我不能开专票（扣减10%费用）</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="head">
          <div class="title">选择金额：</div>
          <div class="tables">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="选择" type="selection"  width="200px" />
              <el-table-column prop="date" label="月账单" />
              <el-table-column prop="money" label="收入（元）" />
            </el-table>
          </div>
          <div class="page_foot">
            <div class="title title_foot">纳税金额：200</div>
            <div class="btn">
              <el-button round color="#0071bb">下一步</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { ComponentSize } from 'element-plus'
import { Search,CaretBottom } from '@element-plus/icons-vue'
const activeStep = ref('1');
const radio = ref(1);
const tableData = [
		{
			id: '1',
			money: '123.00',
			date: '2024-05-20',
		},
		{
			id: '2',
			money: '123.00',
			date: '2024-05-20',
		},
    {
			id: '3',
			money: '123.00',
			date: '2024-05-20',
		},
    {
			id: '4',
			money: '123.00',
			date: '2024-05-20',
		},
	]
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)

	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}

</script>
<style lang="scss">
</style>
<style scoped lang="scss">
.tax-page {
  padding: 20px 10px;
  padding-bottom: 0px;
  background-color: #fff;
  background-color: #f0f0f0;
}
.data-page {
  background-color: #fff;
  margin-top: 20px;

  .data-steps {
    width: 100%;
    padding: 24px 0px;
    border-bottom: 1px solid #cccccc;
    margin-bottom: 22px;
  }
  .data-table {
    .head {
      background-color: #fff;
      padding: 10px 10px 0px 10px;
      .title {
        font-weight: 400;
        font-size: 18px;
        color: #4d4d4d;
        margin: 10px;
      }

      .btn {
        margin-left: 10px;
      }
      .table-btn {
        color: #519ed0;
        cursor: pointer;
      }
      .page_foot {
     
        text-align: end;
        padding: 20px;
        .title_foot {
          width: 100%;
          font-size: 14px;
          color: black;
        }
        .btn{
          width: 100%;
        }
      }
    }
  }
}
:deep() {
  .el-tabs__header {
    padding-right: 20px !important;
    padding-left: 20px !important;
    height: 30px !important;
  }
  .el-tabs,
  .el-tabs__nav-wrap,
  .el-tabs__nav-scroll,
  .el-tabs__nav {
    height: 30px !important;
    border-radius: 0px !important;
  }
  .el-tabs__item {
    height: 30px !important;
  }
  .is-active {
    background: #0071bb;
    color: #fff;
  }
  th {
    background-color: #6d6d6d !important;
    color: #fff !important;
  }
  .el-step__line{
    background-image: url("/src/assets/1720063219115.jpg") !important;
    width: 90%;
    height: 30px !important;
    background: transparent;
    top:-4px !important;
    left: 54% !important;
  }
  .el-step__title.is-finish{
    color: #0071BB !important;
  }
  .el-step__head.is-finish .is-text{
    color: #fff !important;
    padding: 10px;
    background-color: #0071bb !important;
    border: 6px solid #f1f1f1 !important;
  }
  .el-step__head.is-wait .is-text{
    color: #fff !important;
    padding: 10px;
    background-color: #cbcbcb !important;
    border: 6px solid #f1f1f1 !important;
  }
}
</style>